<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullScreenTest</title>
</head>
<body>
<div  onclick = "testFullScreen" style="width:500px;height:500px;background:red;">
    <video  id="content" src="https://www.runoob.com/try/demo_source/movie.mp4" width="220" height="160"  autoplay="autoplay"
           loop="loop" muted></video>
    这是被全屏的元素
    <button id='btn'>全屏</button>
    <button id="closeBtn">退出全屏</button>
</div>

</body>
<script>
    let ele=document.getElementById("content");
    let loadContent;
    window.onload=function(){
        loadContent="load complete"
        console.log('haha')
        var btn = document.getElementById('btn');
        btn.click()
    }

    function test(){
        backToEts.test("backToEts")
    }

    function fullScreen(el) {
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
            wscript;
        if(typeof rfs !== "undefined" && rfs) {
            rfs.call(el);
            return;
        }
        if(typeof window.ActiveXObject !== "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if(wscript) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function exitFullScreen(el) {
        var el= document,
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
            wscript;
        if (typeof cfs !== "undefined" && cfs) {
        cfs.call(el);
        return;
        }
        if (typeof window.ActiveXObject !== "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
    }
    }

    btn.onclick = function(){
        var btn = document.getElementById('btn');
        var content = document.getElementById('content');   //被全屏显示的元素
        fullScreen(content);
    }
    var closeBtn = document.getElementById('closeBtn');
    closeBtn.onclick = function(){
        exitFullScreen();
    }

    function elementFullScreen() {
        let content = document.getElementById('content');
        return content.requestFullscreen()
    }

    function testFullScreen() {
        if (document.fullscreenElement) {
            console.log("already fullscreen return")
            return
        }
        // var de = document.documentElement;
        // if (de.requestFullscreen) {
        //     de.requestFullscreen();
        // } else if (de.mozRequestFullScreen) {
        //     de.mozCancelFullScreen();
        // } else if (de.webkitRequestFullScreen) {
        //     de.webkitRequestFullScreen();
        // }
        let content = document.getElementById('content');
        return content.requestFullscreen()
    }

    function elementExitFullScreen() {
        document.exitFullscreen()
    }

    function checkIsFullScreen() {
        var isFull =!! (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
        return isFull
    }
</script>
</body>
</html>
